{% extends '_layouts/base.html' %}
{% load i18n static %}

{% block title %}{% trans 'Create Account' %}{% endblock %}

{% block content %}
  <div id="ajuda-facebook" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">{% trans 'Find your Facebook profile address' %}</h4>
        </div>
        <div class="modal-body">
          <ol>
            <li>
              <p>{% trans 'On Facebook, find your name in the top navigation bar and click on it.' %}</p>

              <p><img class="img-responsive" src="{% static 'img/kdmeubicho_nome.png' %}"
                      alt="{% trans "Facebook's navigation bar" %}"></p>
            </li>
            <li>
              <p>{% trans "After the page loads your profile address will be in your browser's address bar." %}</p>

              <p><img class="img-responsive" src="{% static 'img/kdmeubicho_endereco.png' %}"
                      alt="{% trans "Browser's address bar" %}"></p>
            </li>
            <li>
              <p>{% trans 'Copy and paste the address in the form field' %}</p>

              <p><img class="img-responsive" src="{% static 'img/kdmeubicho_form.png' %}"
                      alt="{% trans 'Filled form' %}"></p>
            </li>
          </ol>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Close' %}</button>
        </div>
      </div>
    </div>
  </div>

  <h4>{% trans 'Login with your Facebook or Twitter:' %}</h4>
  <a href="{% url 'social:begin' 'facebook' %}"><img src="{% static 'img/facebook.png' %}" alt="Facebook"/></a>
  <a href="{% url 'social:begin' 'twitter' %}"><img src="{% static 'img/twitter.png' %}" alt="Twitter"/></a>

  <h4>{% trans 'Or create a new account:' %}</h4>

  <form method="post">
    {% csrf_token %}
    <div class="row">
      <div class="col-md-6">
        <div class="form-group{% if form.first_name.errors %} has-error{% endif %}">
          <label for="{{ form.first_name.id_for_label }}" class="control-label">{% trans 'First name' %}</label>

          <div class="controls">
            {{ form.first_name }}
            {{ form.first_name.errors }}
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="form-group{% if form.last_name.errors %} has-error{% endif %}">
          <label for="{{ form.last_name.id_for_label }}" class="control-label">{% trans 'Last name' %}</label>

          <div class="controls">
            {{ form.last_name }}
            {{ form.last_name.errors }}
          </div>
        </div>
      </div>
    </div>

    <div class="form-group{% if form.email.errors %} has-error{% endif %}">
      <label for="{{ form.email.id_for_label }}" class="control-label">{% trans 'Email' %}</label>

      <div class="controls">
        {{ form.email }}
        {{ form.email.errors }}
      </div>
    </div>
    <div class="form-group{% if form.username.errors %} has-error{% endif %}">
      <label for="{{ form.username.id_for_label }}" class="control-label">{% trans 'Username' %}</label>

      <div class="controls">
        {{ form.username }}
        <div class="help-block">{{ form.username.help_text }}</div>
        {{ form.username.errors }}
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="form-group{% if form.password1.errors %} has-error{% endif %}">
          <label for="{{ form.password1.id_for_label }}" class="control-label">{% trans 'Password' %}</label>

          <div class="controls">
            {{ form.password1 }}
            {{ form.password1.errors }}
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="form-group{% if form.password2.errors %} has-error{% endif %}">
          <label for="{{ form.password2.id_for_label }}"
                 class="control-label">{% trans 'Password confirmation' %}</label>

          <div class="controls">
            {{ form.password2 }}
            {{ form.password2.errors }}
          </div>
        </div>
      </div>
    </div>

    <fieldset>
      <legend>{% trans 'Optional information' %}</legend>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group{% if form.phone.errors %} has-error{% endif %}">
            <label for="{{ form.phone.id_for_label }}" class="control-label">{% trans 'Phone' %}</label>

            <div class="controls">
              {{ form.phone }}
              {{ form.phone.errors }}
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="form-group{% if form.facebook.errors %} has-error{% endif %}">
            <label for="{{ form.facebook.id_for_label }}" class="control-label">Facebook</label>

            <div class="controls">
              {{ form.facebook }}
              <div class="help-block">{{ form.facebook.help_text|safe }}</div>
              {{ form.facebook.errors }}
            </div>
          </div>
        </div>
      </div>
    </fieldset>

    <div class="form-group text-right">
      <input type="submit" name="submit" class="btn btn-primary" value="{% trans 'Create Account' %}">
    </div>
  </form>
{% endblock content %}